---
layout: blank
title: Gallery
description: Gallery
---

<!DOCTYPE html>
<html lang="zh-CN">

{% include head.html %}
<style>
	html,
	body {
		height: 100%;
		width: 100%;
		padding: 0;
		margin: 0;
	}

	::-webkit-scrollbar {
		width: 4px;
		height: 16px;
		background-color: gainsboro;
	}

	::-webkit-scrollbar-track {
		box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
		border-radius: 4px;
		background-color: gainsboro;
	}

	::-webkit-scrollbar-thumb {
		border-radius: 10px;
		box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
		background-color: gray;
	}

	.gallery-page {
		width: 100%;
		height: 100%;
	}

	.gallery-page .gallery-header {
		outline: 1px solid skyblue;
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		z-index: -1;
		background: no-repeat center center url('/img/gallery-bg.jpg');
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.gallery-page .gallery-header h1 {
		color: white;
		font-size: 55px;
	}

	.gallery-page .gallery-header {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
	}

	.gallery-page .focus-container {
		width: 100%;
		height: 100%;
		display: none;
		background: rgba(0, 0, 0, 0.8);
		position: fixed;
		top: 0;
		align-items: center;
		justify-content: center;
		transition: 0.3s;
		animation-name: gallery-anim-fade-in;
		animation-duration: 0.3s;
	}

	.gallery-page .focus-container img {
		max-width: 100%;
		max-height: 100%;
	}

	.gallery-page .gallery {
		background: whitesmoke;
		width: 100%;
		position: relative;
		top: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		opacity: 0.9;
		animation-name: gallery-anim-start;
		animation-duration: 1s;
		animation-delay: .3s;
	}

	.gallery-page .gallery #gallery-slide-down-container {
		width: 100%;
		display: flex;
		justify-content: center;
		transform: translateY(-100px);
	}

	.gallery-page .gallery #gallery-slide-down-container svg {
		animation-name: gallery-anim-top-down;
		animation-duration: 1s;
		animation-iteration-count: infinite;
	}

	.gallery-page .gallery .painting-container {
		width: 60%;
		display: flex;
		flex-direction: row;
	}

	@media (max-width: 768px) {
		.gallery-page .gallery .painting-container {
			width: 100%;
		}

		.gallery-page .gallery .painting-container span {
			font-size: 8px;
		}
	}

	.gallery-page .gallery .painting-container .painting-div {
		width: 4%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.gallery-page .gallery .painting-container .painting-div .painting-div-verticle {
		width: 4px;
		height: 100%;
		background: gainsboro;
	}

	.gallery-page .gallery .painting-container .painting-div .painting-div-point {
		background: gray;
		border-radius: 50%;
		height: 14px;
		width: 14px;
		position: absolute;
	}

	.gallery-page .gallery .painting-container .gallery-left,
	.gallery-page .gallery .painting-container .gallery-right {
		display: flex;
		align-items: center;
		width: 48%;
		padding: 40px 20px;
	}

	@media (max-width: 768px) {

		.gallery-page .gallery .painting-container .gallery-left,
		.gallery-page .gallery .painting-container .gallery-right {
			padding: 20px 4%;
		}
	}

	.gallery-page .gallery .painting-container .gallery-left {
		animation-name: gallery-anim-slide-left;
		animation-duration: 0.5s;
	}

	.gallery-page .gallery .painting-container .gallery-left div {
		flex: 1;
		text-align: right;
	}

	.gallery-page .gallery .painting-container .gallery-right {
		animation-name: gallery-anim-slide-right;
		animation-duration: 0.5s;
	}

	.gallery-page .gallery .painting-container .painting img {
		border-radius: 20px;
		max-width: 60%;
		transition: 0.3s;
		border: solid 1px white;
	}

	.gallery-page .gallery .painting-container .painting img:hover {
		transform: scale(1.05);
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
	}

	@media (max-width: 768px) {
		.gallery-page .gallery .painting-container .painting img {
			max-width: 96%;
		}
	}

	.gallery-page .gallery .painting-container .painting-intro {
		color: #999;
	}

	@keyframes gallery-anim-slide-right {
		from {
			opacity: 0;
			transform: translateX(-20px);
		}
	}

	@keyframes gallery-anim-slide-left {
		from {
			opacity: 0.8;
			transform: translateX(20px);
		}
	}

	@keyframes gallery-anim-fade-in {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	@keyframes gallery-anim-start {
		50% {
			transform: translateY(-160px);
		}
	}

	@keyframes gallery-anim-top-down {
		50% {
			transform: translateY(-20px);
		}
	}
</style>

<body>
	{% include nav.html %}
	{% include search.html %}

	<div class="gallery-page">
		<div class="gallery-header">
			<h1>Gallery</h1>
			<br>
			<span>手残党的日常 | Chase的画册</span>
		</div>
		<div class="gallery">
			<div id="gallery-slide-down-container">
				<svg t="1605619759740" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
					p-id="6943" width="32" height="32">
					<path
						d="M841.508571 694.491429a51.2 51.2 0 0 0 77.824-66.048l-5.412571-6.363429-365.714286-365.714286a51.2 51.2 0 0 0-66.048-5.412571l-6.363428 5.412571-365.714286 365.714286a51.2 51.2 0 0 0 66.048 77.824l6.363429-5.412571L512 364.909714l329.508571 329.581715z"
						p-id="6944" fill="#e6e6e6"></path>
				</svg>
			</div>
			<div class="painting-container">
				<div class="gallery-left">
					<div class="painting">
						<img src="/img/painting/2019-03-16.jpg" alt="">
					</div>
				</div>

				<div class="painting-div">
					<div class="painting-div-verticle"></div>
					<div class="painting-div-point"></div>
				</div>

				<div class="gallery-right">
					<div class="painting-intro">
						<h3>一副至今没完工的画</h3>
						<span>2019年03月16日</span>
						<hr>
						<span>临摹Pixiv一个画师的画（与原图差距相当大hhh），
							大一的时候就开始画了，但是当时只画了一部分。
							后来大二的某个假期又补上了一些，然而依然到现在还没有画完。
							这副原本是要送给同学的画到一半不想送了哈哈哈。</span>
					</div>
				</div>
			</div>

			<div class="painting-container">
				<div class="gallery-left">
					<div class="painting-intro">
						<span>2019年06月09日</span>
						<hr>
						<span>照着一张真人照片，修改成二次元风格的画。
							直接用圆珠笔上的OvO，所以还有很多多余的线条在上面。</span>
					</div>
				</div>

				<div class="painting-div">
					<div class="painting-div-verticle"></div>
					<div class="painting-div-point"></div>
				</div>

				<div class="gallery-right">
					<div class="painting">
						<img src="/img/painting/2019-06-09.jpg" alt="">
					</div>
				</div>
			</div>

			<div class="painting-container">
				<div class="gallery-left">
					<div class="painting">
						<img src="/img/painting/rem.jpg" alt="">
					</div>
				</div>

				<div class="painting-div">
					<div class="painting-div-verticle"></div>
					<div class="painting-div-point"></div>
				</div>

				<div class="gallery-right">
					<div class="painting-intro">
						<h3>雷姆</h3>
						<span>高二暑假</span>
						<hr>
						<span>高二看《Re:0》很喜欢雷姆，就画了这一副到目前为止我认为画的最好最用心的一幅哈哈哈OvO。</span>
					</div>
				</div>
			</div>

			<div class="painting-container">
				<div class="gallery-left">
					<div class="painting-intro">
						<h3>初音</h3>
						<span>初中</span>
						<hr>
						<span>不记得具体什么时候画的了哪天找一找。</span>
					</div>
				</div>

				<div class="painting-div">
					<div class="painting-div-verticle"></div>
					<div class="painting-div-point"></div>
				</div>

				<div class="gallery-right">
					<div class="painting">
						<img src="/img/painting/miku.jpg" alt="">
					</div>
				</div>
			</div>
		</div>
		<div id="focus-container" class="focus-container">
			<img src="" alt="">
		</div>
	</div>

	<script>
		let focusContainer = document.getElementById('focus-container');
		focusContainer.addEventListener('click', function () {
			this.style.display = 'none';
		})

		let paintingDoms = document.getElementsByClassName('painting');
		Array.from(paintingDoms).forEach(element => {
			element.childNodes.forEach(e => {
				if (e instanceof HTMLImageElement) {
					e.addEventListener('click', () => {
						let focusPaintingDom = focusContainer.childNodes[1];
						if (focusPaintingDom instanceof HTMLImageElement) focusPaintingDom.src = e.src;
						focusContainer.style.display = 'flex';
					})
				}
			})
		});
	</script>

</body>



</html>